import React, { useState, useEffect } from "react";
import { Table, Button, Modal, message, Tree } from "antd";
import axios from "axios";
import {
  DeleteOutlined,
  SettingOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";

export default function RoleList() {
  const { confirm } = Modal;
  const [dataSource, setDataSource] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [rightList, setRightList] = useState([]);
  const [currentRights, setCurrentRights] = useState([]);
  const [currentId, setCurrentId] = useState();
  useEffect(() => {
    axios.get("http://localhost:5000/roles").then((res) => {
      setDataSource(res.data);
    });
  }, []);
  useEffect(() => {
    axios.get("http://localhost:5000/rights?_embed=children").then((res) => {
      setRightList(res.data);
    });
  }, []);
  console.log(dataSource);
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render: (id) => {
        return <b>{id}</b>;
      },
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
    },
    {
      title: "操作",
      render: (item) => {
        return (
          <div style={{ textAlign: "center" }}>
            <Button
              type="danger"
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => showConfirm(item)}
            />
            &nbsp;
            <Button
              type="primary"
              shape="circle"
              icon={<SettingOutlined />}
              onClick={() => {
                setIsModalVisible(true);
                setCurrentRights(item.rights);
                setCurrentId(item.id);
              }}
            />
          </div>
        );
      },
    },
  ];
  const showConfirm = (item) => {
    confirm({
      title: "确定删除吗？",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteMethod(item);
      },
      onCancel() {
        message.warning("取消删除");
      },
    });
  };
  const deleteMethod = (item) => {
    setDataSource(dataSource.filter((data) => data.id !== item.id));
    axios.delete(`http://localhost:5000/roles/${item.id}`);
    message.success("删除成功");
  };
  const handleOk = () => {
    // console.log(currentRights);
    setIsModalVisible(false);
    // put接口
    axios.patch(`http://localhost:5000/roles/${currentId}`, {
      rights: currentRights,
    });
    // 同步datasource
    setDataSource(
      dataSource.map((item) => {
        if (item.id === currentId) return { ...item, rights: currentRights };
        return item;
      })
    );
  };
  const handleCancel = () => {
    setIsModalVisible(false);
    message.warning("取消编辑");
  };
  const onCheck = (checkKeys) => {
    // console.log(checkKeys);
    setCurrentRights(checkKeys.checked);
  };
  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
      ></Table>
      <Modal
        title="权限分配"
        visible={isModalVisible}
        onOk={() => handleOk()}
        onCancel={() => handleCancel()}
      >
        <Tree
          checkable
          checkedKeys={currentRights}
          onCheck={onCheck}
          treeData={rightList}
          checkStrictly={true}
        />
      </Modal>
    </div>
  );
}
